<template>
  <div class="main">
    <div class="topBar">
      <div class="logo"><a href="/web"><img src="@/assets/images/img_logo.png"/></a></div>
      <div class="tel"><img src="@/assets/images/img_tel.png"/>&nbsp;400-9932-799</div>
    </div>
    <div class="login">
      <a-form-model
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
      >
        <div class="form">
          <h4>快捷登录</h4>
          <a-form-model-item prop="phone">
            <a-input size="large" type="text" v-model="loginForm.phone" placeholder="请输入您的手机号码">
              <a-icon slot="prefix" type="user" />
            </a-input>
          </a-form-model-item>
          <a-form-model-item prop="code">
            <a-input style="float:left;width:200px" v-model="loginForm.code" size="large" type="text" placeholder="请输入验证码">
              <a-icon slot="prefix" type="search" />
            </a-input>
            <a-button
              style="float:right;width:96px"
              size="large"
              type="default"
              @click="sendSms"
              :disabled="btnSms"
              v-text="btnText"
            >
            </a-button>
          </a-form-model-item>
          <a-button block size="large" type="danger" @click="onSubmit" :loading="loading">登录</a-button>
          <a-form-model-item prop="checkbox">
            <a-checkbox v-model="loginForm.checkbox"></a-checkbox>
            &nbsp;&nbsp;我已阅读并接受<a @click="$router.push({ name: 'Explain' })">《服务条款》</a>
          </a-form-model-item>
        </div>
      </a-form-model>
    </div>
    <div class="foot">
      <div class="info">
        <span>北京卓一慧众知识产权代理有限公司版权所有</span>
        <span><img src="@/assets/images/icon_tel.png"/>&nbsp;&nbsp;400-9932-799</span>
      </div>
      <p>本公司所有专利业务皆由北京精翰代理申报&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;北京精翰长期授权于本公司全权处理代理的所有专利及其他业务</p>
      <a href="http://beian.miit.gov.cn" target="_blank">备案号：京ICP备17041879号-1</a>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { sendSms } from '@/api/login'

export default {
  data () {
    return {
      checkClass: 'on',
      loginForm: {
        phone: '',
        code: ''
      },
      loginRules: {
        phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        checkbox: [{ required: true, message: '请阅读并接受隐私协议', trigger: 'change' }]
      },
      btnSms: false,
      btnText: '发送短信',
      totalTime: 60,
      loading: false
    }
  },
  methods: {
    ...mapActions(['Login']),

    onSubmit () {
      const app = this
      const { Login } = this
      app.$refs.loginForm.validate(valid => {
        if (valid) {
          app.loading = true
          Login(app.loginForm).then(res => {
            console.log(res)
            if (res.status === 0) {
              app.$router.push({ path: '/' })
            } else {
              app.$warning({
                title: res.msg
              })
              app.loading = false
            }
          })
        } else {
          app.loading = false
          return false
        }
      })
    },
    sendSms () {
      const app = this
      if (app.loginForm.phone === '') {
        app.$message.warning('必须填写手机号码')
        return false
      }
      sendSms(app.loginForm.phone).then(res => {
        if (res.status === 0) {
          app.btnSms = true
          const clock = setInterval(() => {
            app.totalTime--
            app.btnText = app.totalTime + 's'
            if (app.totalTime < 0) {
              clearInterval(clock)
              app.btnText = '发送短信'
              app.totalTime = 60
              app.btnSms = false
            }
          }, 1000)
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .main{height: 100vh;background: url("../../assets/images/bg.jpg")no-repeat center;background-size: cover;padding-top: 40px;}
  .topBar{display: flex;align-items: center;justify-content: space-between;width: 1200px;margin: 0 auto;}
  .topBar .tel{display: flex;align-items: center;font-size: 20px;color: #ffffff;font-weight: 700;}
  .login{width: 1090px;display: flex;justify-content: flex-end;margin: 155px auto 0;}
  .login .form{background-color: #ffffff;width: 412px;padding: 31px 51px 44px;}
  .login .form h4{font-size: 22px;color: #333333;text-align: center; margin-bottom: 27px}
  .login .form p{display: flex;align-items: center;justify-content: space-between;margin: 27px 0 30px;}
  .login .form .input{font-size: 16px;border: solid 1px #dddddd;border-radius: 5px;height: 44px;width: 100%;padding-left: 48px;outline: none;}
  .login .form .sjhm{background: url("../../assets/images/icon_user.png")no-repeat 16px center;}
  .login .form .code{width: 180px;background: url("../../assets/images/icon_pwd.png")no-repeat 16px center;}
  .login .form .getCode{width: 110px;height: 44px;border: solid 1px #dddddd;border-radius: 5px;cursor: pointer;font-size: 16px;color: #999999;background-color: #eeeeee;}
  .login .form .submit{font-size: 20px;color: #ffffff;background-color: #f70306;border-radius: 5px;display: block;line-height: 44px;cursor: pointer;text-align: center;}
  .login .form .notes{font-size: 12px;color: #999999;display: flex;align-items: center;margin-top: 28px;}
  .login .form .notes .check{width: 14px;height: 14px;border: solid 1px #f70306;border-radius: 3px;cursor: pointer;}
  .login .form .notes .check.on{background: url("../../assets/images/icon_checked.png")no-repeat center;}
  .login .form .notes a{color: #f70306;cursor: pointer;}
  .foot{background-color: #ffffff;position: fixed;width: 100%;left: 0;bottom: 0;display: flex;align-items: center;justify-content: center;flex-direction: column;height: 134px;}
  .foot .info{font-size: 14px;color: #666666;display: flex;align-items: center;justify-content: center;}
  .foot .info span{display: flex;align-items: center;margin: 0 20px;}
  .foot p{font-size: 12px;color: #333333;margin: 12px 0 10px;}
  .foot a{font-size: 12px;color: #666666;}
</style>
